<template>
  <div class='yun-login'>
      <div class='yun-form'>
          <el-form :model="yform" :rules="rules" size='small'>
            <el-form-item prop="username">
                <el-input v-model="yform.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="yform.password" type='password' placeholder="密码"></el-input>
            </el-form-item>
            <el-button class='yun-btn' size='small' @click='loginSystem'>登录</el-button>
          </el-form>
          <div class='yun-icon icon1'></div>
          <div class='yun-icon icon2'></div>
          <div class='yun-icon icon3'></div>
          <div class='yun-icon icon4'></div>
      </div>
      <div class='yun-china'>
          <img src="@/assets/img/login/china.png" alt="">
      </div>
      <div class='yun-q1'>
          <img src="@/assets/img/login/loginbg1.png" alt="">
      </div>
       <div class='yun-q2'>
          <img src="@/assets/img/login/loginbg1.png" alt="">
      </div>
       <div class='yun-q3'>
          <img src="@/assets/img/login/loginbg3.png" alt="">
      </div>
       <div class='yun-q4'>
          <img src="@/assets/img/login/loginbg3.png" alt="">
      </div>
       <div class='yun-q5'>
          <img src="@/assets/img/login/loginbg3.png" alt="">
      </div>
       <div class='yun-q6'>
          <img src="@/assets/img/login/loginbg4.png" alt="">
          <div class='yun-raduis'>
              <div class='yun-color'></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            yform:{
                username:'',
                password:''
            },
            rules:{
               
            }
        }
    },
    methods:{
        loginSystem(){
            this.$router.push('/report')
        }
    }
}
</script>

<style lang='less' scoped>
    .yun-login{
        width:100%;
        height:100%;
        position: relative;
         background: linear-gradient(to bottom, #5203ac 30%,#0595a8 100%);
    }
    .yun-form{
        width:300px;
        border:1px solid #0595a8;
        padding:20px;
        border-radius: 6px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        /deep/.el-input__inner{
            border:1px solid #0595a8a1;
            background: transparent;
            color:#fff;
        }
        .yun-icon{
            width: 30px;
            height:30px;
            background-image: url('~@/assets/img/login/loginbg2.png');
            background-size:100% 100%;
            background-repeat: no-repeat;
            position:absolute;
            animation: play 2s infinite linear;
            &.icon1{top:-15px;left:-15px;}
            &.icon2{top:-15px;right:-15px;}
            &.icon3{bottom:-15px;left:-15px;}
            &.icon4{bottom:-15px;right:-15px;}
        }

    }
    .yun-q1{
        position: absolute;
        top:6%;
        left:4%;
        animation: play 2s infinite linear;
    }
    .yun-q2{
        position: absolute;
        right:12%;
        bottom:10%;
        animation: play 2s infinite linear;
    }
    .yun-q3{
        position: absolute;
        top:40px;
        right:40px;
        animation: scalePlay 2s 1s infinite linear;
    }
    .yun-q4{
        position: absolute;
        top:10%;
        right:20%;
         animation: scalePlay 4s 2s infinite linear;
    }
     .yun-q5{
        position: absolute;
        top:30%;
        right:12%;
         animation: scalePlay 3s 3s infinite linear;
    }
     .yun-q6{
         width:360px;
         height:73px;
         img{
             width:100%;
         }
        position: absolute;
        bottom:10%;
        left:0;
        .yun-raduis{
            width: 80px;
            height: 27px;
            position: absolute;
            right: 14px;
            bottom: 14px;
            border-radius: 27px;
            overflow: hidden;
            .yun-color{
                width:80px;
                height:27px;
                background-color:rgb(10, 224, 231); 
                animation:myfirst 1s linear 1s infinite alternate;
            }
        }
    }
    .yun-btn{
        display: block;
        margin:0 auto;
        width:100%;
        color:#fff;
          background: linear-gradient(to left, #11b8eb,#08cfb5,#11b8eb);
          border:0;
    }
    .yun-china{
        position: absolute;
        top:10%;
        left:6%;
        opacity: 0.3;
    }
    @keyframes play{
            from { transform: rotate(0deg) }
            to {
                transform: rotate(360deg);
            }
        }
    @keyframes scalePlay{
            0% { transform: scale(0.6) }
            50% {
                transform: scale(1);
            }
            100%{
                transform: scale(0.6)
            }
        }
    @keyframes myfirst
    {
        0%   {width:0px;}
        100% {background-color:rgb(0, 255, 191); width:80px;}
    }
</style>